<template>
  <div >
    <div
        class="bar"
    >
        <p class="bar-username">张司机</p>
        <ul   >
            <router-link
                class="bar-li  border-bottom"
                tag="li"
                v-for="(item,index) of barList"
                :key="index"
                :to="item.barUrl"
            >
            <span class="iconfont arrow-icon">&#xe64a;</span>
            {{item.barName}}
            </router-link>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Navigationbar',
  props: {
  },
  data () {
    return {
      barList: [
        {
          barUrl: '/MyTask',
          barName: '当前任务',
          barIcon: ''
        },
        {
          barUrl: '/MyApplication',
          barName: '我的申请',
          barIcon: ''
        }
      ]
    }
  },
  methods: {
    shadowShow () {
      this.$emit('inc')
    }
  }
}
</script>

<style lang="stylus" scoped >
  @import '~styles/varibles.styl'
  .border-bottom::before
    border-color: #000
  .bar-username
    color: $barBg
    height: 1.15rem
    line-height: 1.15rem
    font-size: $barFontSize
    text-align:center
    padding: 0 .2rem
  .bar
    background: $barColor
    width: auto
    height: 100%
    position: absolute
    left: 0
    top: 0
    z-index: 99
    .bar-li
      height: 1.1rem
      color: $barBg
      font-size: $barFontSize
      line-height: $barLineHeight
      text-align:center
      padding: 0 .2rem
</style>
